<template>
  <div class="intelligent-matching">
    <!-- 顶部导航栏 -->
    <mt-header>
      <router-link to="/homepage"
                   slot="left">
        <mt-button icon=""
                   class="mintui">家政平台</mt-button>
      </router-link>
    </mt-header>
    <van-popup v-model="isUpdateFarenShowArea"
               position="bottom">
      <van-area :area-list="areaList"
                @confirm="onConfirmThree"
                @cancel="isUpdateFarenShowArea = false" />
    </van-popup>
    <div class="search">
      <van-search @click="searchShow = true"
                  v-model="value"
                  placeholder="智能匹配"
                  clearable />
      <div class="region">
        <span class="changsha">{{ dizhi }}</span>
        <span class="jiazheng xiatubiao"
              @click="isUpdateFarenShowArea = true"
              :value="zhucelocal">&#xe608;</span>
      </div>
    </div>
    <div class="occupation-type service-type">
      <div class="all-button-occupation all-button-district"
           v-for="(item,index) in district"
           :key="item.id">
        <span class="span"
              @click="cutTabClick($event,index)"
              :class="indexs === index ? 'artict' : ''">{{item.name}}</span>
      </div>
    </div>
    <!-- <van-button type="primary" size="normal" class="screen" round @click="$router.push('/homeservercompany')">更多筛选</van-button> -->
    <van-pull-refresh v-model="isLoading"
                      @refresh="onRefresh">
      <van-row class="van-xinxi top"
               v-for="item in manylist"
               :key="item.id"
               @click="$router.push('/Housekeeping-details')">
        <div class="average-shang">
          <div class="average-shang-left">
            <img class="img"
                 :src="item.photolist"
                 alt="" />
          </div>
          <div class="average-shang-center">
            <div class="average_name">
              <span>{{item.company}}</span>
            </div>
            <div class="average_jingli">
              <span>你的笑容，是我们最大的追求！</span>
            </div>
            <div class="average_job">
              <span>协会成员</span>
              <span>服务号</span>
              <span>环境优美</span>
            </div>
          </div>
        </div>
        <div class="average-xia">
          <span class="jiazheng dibiao">&#xe65e;&nbsp;22.68km</span>
          <span class="place">湖南省长沙市天心区暮云工业园开服曼城住宅</span>
        </div>
      </van-row>
    </van-pull-refresh>
    <van-popup v-model="searchShow"
               position="bottom"
               :style="{ height: '100%' }">
      <!-- 导航栏 -->
      <van-row>
        <van-nav-bar :fixed="true"
                     title="公司筛选"
                     @click-left="searchShow = false">
          <template #left>
            <van-icon name="cross"
                      size="18" />
          </template>
        </van-nav-bar>
      </van-row>

      <filter-show @click-left="searchShow = false" />
    </van-popup>
  </div>
</template>

<script>
// 引入moke.js
import '@/mock/ljl-mock.js'
// 导入处理省市的文件
import AeraList from '../../../../utils/area.js'
// 导入接口
import { homeHelp, getmanylist } from '@/api/HomeServerCompany'
import FilterShow from '../HomeServerCompany/index'
export default {
  components: {
    FilterShow
  },
  name: 'IntelligentMatching',
  props: {},
  data () {
    return {
      isLoading: false,
      searchShow: false,
      dizhi: '长沙',
      // isshow: false,
      index: '',
      indexs: 0,
      // 注册地区
      zhucelocal: '',
      value: '',
      // 点击是否展示
      isUpdateFarenShowArea: false,
      areaList: AeraList,
      // 公司的类型
      manylist: [],
      // 职业类型
      district: [{
        id: 0,
        name: '市辖区'
      }, {
        id: 1,
        name: '芙蓉区'
      },
      {
        id: 2,
        name: '天心区'
      },
      {
        id: 3,
        name: '岳麓区'
      },
      {
        id: 4,
        name: '开福区'
      },
      {
        id: 5,
        name: '雨花区'
      },
      {
        id: 6,
        name: '长沙县'
      },
      {
        id: 7,
        name: '望城县'
      },
      ],
      list: [
        {
          id: 0,
          name: '协会成员'
        },
        {
          id: 1,
          name: '服务好'
        },
        {
          id: 2,
          name: '环境优美'
        }]
    }
  },
  created () {
    this.getxx()
    this.getcompany()
  },
  methods: {
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },
    async getcompany () {
      const data = await getmanylist()
      this.manylist = data.data.list
      console.log(data.data);
    },
    async getxx () {
      const data = await homeHelp()
    },
    // 第一个选择器
    onConfirmThree (value) {
      const arr = value;
      const names = arr[2].name
      this.dizhi = names
      const list = JSON.parse(JSON.stringify(this.district))
      const index = list.findIndex((item, index) => {
        // console.log(this.district[index].name);
        // console.log(this.district[index].name);
        if (this.district[index].name === names) {
          return index
        }
      })
      this.indexs = index
      console.log(index);
      console.log(this.indexs);
      this.isUpdateFarenShowArea = false
    },
    // 点击高亮显示
    cutTabClick (e, index) {
      if (e.target.className.indexOf('artict') === -1) {
        e.target.className = 'span artict'
      } else {
        e.target.className = 'span'
      }
    },
    // 输入框弹出框
    showPopupSearch () {
      this.isshow = true
    },
    // 跳转
    // hander () {
    //   this.$router.push('/Housekeeping-details')
    // }
  }
}
</script>
<style lang="less" scoped>
/deep/ .van-nav-bar {
  background: #1196db;
  .van-nav-bar__left {
    .van-icon {
      color: #fff;
    }
    .van-nav-bar__text {
      color: #fff;
    }
  }
  .van-nav-bar__title {
    color: #fff;
  }
}

.intelligent-matching {
  // position: relative;
  height: 1600px;
  background-color: #f8f8f8;
  .mint-header {
    height: 120px;
    background-color: #1196db;
    // border-bottom:1px solid #000;
    .mt-button {
      font-size: 32px;
    }
    /deep/ .mintui {
      font-size: 34px;
      margin-left: 24px;
    }
  }
  .search {
    display: flex;
    height: 128px;
    background-color: #1196db;
    .van-search {
      flex: 1;
      background-color: #1196db;
    }
    .region {
      font-size: 35px;
      line-height: 126px;
      color: #fff;
      .xiatubiao {
        font-size: 40px;
      }
    }
  }
  .service-type {
    padding-left: 20px;
    font-size: 30px;
    // margin-left: 32px;
    // height: 400px;
    line-height: 70px;
    // margin-bottom: 20px;
    // background-color: #ccc;
  }
  .screen {
    height: 60px;
    width: 670px;
    margin-left: 44px;
    margin-bottom: 10px;
    background-color: #1196db;
  }
  .all-button-district {
    margin-top: 20px;
    display: inline-block;
    margin-bottom: 1px solid #ccc;
  }
  /deep/ .span {
    display: inline-block;
    margin-right: 20px;
    margin-top: 20px;
    padding: 0 30px 0 30px;
    height: 50px;
    color: #9a9391;
    border: 1px solid #9a9391;
    border-radius: 50px;
    line-height: 50px;
    text-align: center;
    // color: #fff;
  }
  .artict {
    color: #fff;
    background-color: #1196db;
    border: 1px solid #1196db;
  }
  .open {
    text-align: center;
    font-size: 40px;
  }
  .two-btn {
    margin-bottom: 300px;
    /deep/ .van-button {
      background-color: #1196db;
    }
    .clear {
      margin-right: 100px;
      margin-left: 100px;
      padding: 0 50px 0 50px;
    }
    .confirm {
      padding: 0 50px 0 50px;
    }
    .van-button__text {
      color: #fff;
      font-size: 30px;
    }
  }
  /deep/ .limitedCompany {
    display: flex;
    .limited {
      flex: 3;
    }
  }
  .van-xinxi {
    margin-top: 20px;
    padding: 20px;
    background: #fff;
    /deep/ .average-shang {
      display: flex;
      .average-shang-left {
        width: 140px;
        height: 140px;
        // background-color: purple;
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .average-shang-center {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: 0 30px;
        .average_name {
          font-size: 26px;
        }
        .average_job {
          margin-bottom: 10px;
          span {
            display: inline-block;
            font-size: 22px;
            height: 40px;
            color: #1196db;
            line-height: 40px;
            border: 1px solid #1196db;
            border-radius: 40px;
            padding: 0 20px;
            margin-right: 20px;
          }
        }
        .average_jingli {
          font-size: 20px;
          color: #979191;
          margin: 10px 0 0;
        }
      }
    }
    /deep/ .average-xia {
      // padding-bottom:100px;
      /deep/ .dibiao {
        font-size: 15px;
        margin-right: 40px;
      }
      /deep/ .place {
        font-size: 20px;
      }
    }
  }
  .top {
    margin-bottom: 10px;
  }
}
</style>
